<template>
    <div>
        <div class="w100 h-50 bgff rowsc rowsm br-16 fs-16 col333 fw-b mt-20 mb-16">劳动成果</div>

<div class="w100 bgff br-16 p-all-20 mb-20">
<div class="fs-20 col333 fw-b mb-10">简要说明：</div>
<el-input
type="textarea"
:rows="4"
placeholder="请输入您的劳动说明"
class="input"
 v-model="info">
</el-input>
</div>

<div class="w100 bgff br-16  pl-20 pr-20 trt mb-40"  style="padding: 20px">
<div class="fs-20 col333 fw-b"  style="text-align: left; ">附件上传：</div>
<el-upload
class="upload-demo"
ref="upload"
:action="`${this.$apiUploadUrl}/api/utils/ossUpload`"
:show-file-list="true"
:multiple="false"
:limit="6"
:on-success="uploadSuccess"
:on-error="uploadErr"
:on-remove="delFile"
:before-upload="beforeUpload"
 :disabled="isUploadSuccess"
accept=".doc, .docx, .pdf, .xls, .xlsx, .jpg, .jpeg, .png, .mp4, .mov, .avi"

>
<div class="rows rowsm">
   <img src="../../../static/img/icon_sc.png" class="w-30 h-30" alt="">
    <div class="fs-20 col888">（可上传word、pdf、excel、图片、视频）</div>
</div>
<p class="mark">视频上传最大不超过100M</p>
</el-upload>

</div>

<div class="w100 rowsc rowsm">
 <el-button  type="primary" 
        class="w-400 h-60 br-30 fs-24" 
        style="background-color: #E33636;border:none;font-size:22px;border-radius: 30px;" 
        :disabled="isUploadSuccess"
        @click="submit"
      >提交</el-button>
    </div>
    </div>
  </template>
  
  <script>
export default {
  components: {},
  props: {},
  data() {
    return {
      info: "",
      file: "",
      fileName: "",
      fileType: "",
      proFileList: [],
      isUploadSuccess: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    delFile(file) {
      this.proFileList = this.proFileList.filter(
        (item) => item.file != file.response.url
      );
    },
    beforeUpload(file) {
      this.isUploadSuccess = true;
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isLt100M) {
        this.$message.warning("上传的文件大小不能超过 100MB!");
      }
      return isLt100M;
    },
    submit() {
      if (!this.info)
        return this.$notify({ title: "提示", message: "请输入内容" });
      if (this.proFileList.length == 0)
        return this.$notify({ title: "提示", message: "请上传文件" });

      let data = {
        content: this.info,
        file: this.file,
        fileType: this.fileType,
        fileName: this.fileName,
        proFileList: this.proFileList,
      };

      this.$axios.post("proldcg/add", { ...data }).then((res) => {
        this.$notify({
          title: "提示",
          message: res.data.msg,
        });
        if (res.data.code != 200) return;
        setTimeout(() => {
          this.info = "";
          this.file = "";
          this.fileName = "";
          this.fileType = "";
          this.proFileList = [];
          this.$refs.upload.clearFiles();
        }, 1000);
      });
    },
    uploadSuccess(response, file, fileList) {
      if (response.code == 200) {
        console.log("success");
        console.log(response, file, fileList);
        this.proFileList.push({
          file: response.url,
          fileName: response.originalFilename,
          fileType:
            file.raw.type.split("/")[0] == "image" ||
            file.raw.type.split("/")[0] == "video"
              ? file.raw.type.split("/")[0]
              : "file",
        });
        this.$message.success("上传成功");
        this.isUploadSuccess = false;
      } else {
        fileList.splice(fileList.indexOf(file), 1);
        this.$notify({ title: "提示", message: response.msg || "上传失败" });
        this.isUploadSuccess = false;
      }
    },
    uploadErr(err, file, fileList) {
      console.log("err");
      console.log(err, file, fileList);
    },
  },
  created() {},
  mounted() {},
};
</script>
  <style lang="scss" scoped>
.input /deep/ .el-input__inner {
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: 20px;
  text-align: right;
}
</style>